<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>这是第七节课</title>
		<style>
			* {
				padding: 0;
				margin: 0;
			}

			canvas {
				width: 500px;
				height: 500px;
				border: 1px red solid;
			}

			.container {
				width: 100vw;
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		</style>
	</head>
	<body>
		<!-- <img src="../img/img.png" id="img"> -->
		<div class="container">
			<canvas id="canvas" width="500px" height="500px"></canvas>
		</div>
	</body>

	<script>
		window.onload = function() {
			let yCanvas = document.getElementById('canvas');
			console.dir(yCanvas);
			let yPen = yCanvas.getContext("2d"); //drawImage

			// let yImage = document.getElementById('img2222g');
			// console.dir(yImage) //图片的对象x,y图片的左上角对应的坐标
			// //yPen.drawImage(yImage,0,0);

			// let yImage = new Image();
			// yImage.src = "../img/icon.png";
			// console.dir(yImage);
			// yImage.onload = function() {
			// // yPen.drawImage(yImage, 0, 0,200,150);
			// // yPen.drawImage(yImage,5,200,70,135,0,0,70,135);//被截取的图片的横坐标，被截取图片的纵坐标，被截取图片的宽度，被截取图片的高度，被截取的部分现在的横坐标,右上角y,对截取图片拉升后的宽度，高度
			// // yPen.drawImage(yImage,75,160,50,110,75,0,50,110);
			// // yPen.drawImage(yImage,130,235,50,115,160,0,50,115);
			// // yPen.drawImage(yImage,200,100,180,250,250,0,180,225);
			// let myPattern =yPen.createPattern(yImage,'repeat-y');
			// yPen.fillStyle=myPattern;
			// yPen.fillRect(0,0,500,500);		


			//part 2

			let repeatCanvas = document.createElement('canvas');
			repeatCanvas.width = 30;
			repeatCanvas.height = 30;
			let repeatPen= repeatCanvas.getContext("2d");
			repeatPen.arc(15, 15, 15, 0, Math.PI / 180 * 360, true);
			repeatPen.fillStyle = "skyblue";
			repeatPen.fill();
			let myPattern = yPen.createPattern(repeatCanvas, 'repeat');
			yPen.fillStyle = myPattern;
			yPen.fillRect(0, 0, 500, 500);

			// console.dir(repeatCanvas);
			// yPen.arc(15, 15, 15, 0, Math.PI / 180 * 360, true);
			// yPen.fillStyle = "green";
			// yPen.fill();


		}
	</script>
</html>
